<html>
<head>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<title>炸金花房间<?php echo $room_number;?></title>

<link rel="stylesheet" type="text/css" href="<?php echo $image_url;?>files/css/flower/flower-6-16.css">
<link rel="stylesheet" type="text/css" href="<?php echo $image_url;?>files/css/alertbox.css">
<script type="text/javascript" src="<?php echo $image_url;?>files/js/fastclick.js"></script>


<script>

    window.addEventListener('load', function() {
        FastClick.attach(document.body);
    }, false);

    var newNum = "";
    var per = window.innerWidth / 530;
    var globalData = {
        "card":"<?php echo $card;?>",
        "roomNumber":"<?php echo $room_number;?>",
        "baseUrl":"<?php echo $base_url;?>",
        "openId":"<?php echo $open_id;?>",
        "socket":"<?php echo $socket;?>",
        "roomUrl":"<?php echo $room_url;?>",
        "dealerNum": "<?php echo $dealer_num;?>",
        "fileUrl": "<?php echo $file_url;?>",
        "imageUrl": "<?php echo $image_url;?>",
        "roomStatus":"<?php echo $room_status;?>",
        "scoreboard":'<?php echo $balance_scoreboard;?>',
        "session":'<?php echo "$session"?>',
        "httpUrl":'<?php echo "$http_url"?>',
        "shareTitle":"6人炸金花",

        //广播
        "isNotyMsg":'<?php echo "$is_announcement"?>',
        "notyMsg":'<?php echo "$announcement_content"?>',
        "notyTime":'<?php echo "$announcement_sec"?>',
        "notySpeed":8000,
    };
    var userData = {
        "accountId":"<?php echo $user['account_id'];?>",
        "nickname":"<?php echo $user['nickname'];?>",
        "avatar":"<?php echo $user['headimgurl'];?>",
        "isAuthPhone":"<?php echo $isAuthPhone;?>",
        "authCardCount":"<?php echo $authCardCount;?>",
        "phone":"<?php echo $phone;?>",
        "myCode":"<?php echo $user['my_code']==-1||$user['my_code']=='-1'||$user['my_code']==''?20000+$user['user_code']:$user['my_code'];?>",
    };
    var configData = {
        "appId":"<?php echo $config_ary['appId'];?>",
        "timestamp":"<?php echo $config_ary['timestamp'];?>",
        "nonceStr":"<?php echo $config_ary['nonceStr'];?>",
        "signature":"<?php echo $config_ary['signature'];?>",
    };
    
</script>
</head>

<body>
    <style>
        body.modal-show {position: fixed;width: 100%;}
        .record{position: fixed;top:0;left:0;height:100%;width:100%; z-index: 150;} 
        .record .recordBack{position: fixed;top:0;left:0;height:100%;width:100%;background: #0d0a12;opacity:.7;}    
        .record .leftLine{position: fixed;left: 0%;margin-left:20px;height:100%;width: 0;border-left:1px solid #ecb700;}    
        .record .mainPart{position: absolute;top:0;left:0;height:100%;width:100%;overflow: auto;}   
        .record .mainPart .recordList{position: relative;margin-left: 40px;margin-top: 20px;}   
        .record .mainPart .recordList .recordTime{color:#ecb700;font-size: 14px;}   
        .record .mainPart .recordList .yellowPoint{position: absolute;width:30px;height:30px;top:10px;left:-35px; } 
        .record .mainPart .recordList .yellowPoint .point{background:#ecb700;position: absolute;height:6px;width:6px;border-radius:3px;top:12px;left:12px; }    

        .record .mainPart .recordList .recordInfo{background:#cfced0;position: relative;width:80%;border-radius:6px;margin-top:5px;padding:5px 15px; }      
        .record .mainPart .recordList .recordInfo .recordItem{height:40px;font-family:simHei; border-top:1px solid #ababab;line-height: 40px;font-size: 16px;}  
        .record .mainPart .recordList .recordInfo .recordItem .name{float: left;height: 40px;width:120px;overflow: hidden;margin-left: 15px;}   
        .record .mainPart .recordList .recordInfo .recordItem .score{float: right;width:80px;overflow: hidden;right: 15px;}
        .record .mainPart .recordList .recordInfo .borderNone{border: none;}

        .clickMe{position: absolute;top: 1%;right: 2%;width: 24%;z-index:91;text-align: center;height: 3.2vh;line-height: 3.2vh;}
        .clickMe img{width:100%}
        .copyMe{position: absolute;top: 6%;right: 2%;width: 24%;z-index:91;text-align: center;height: 4.5vh;line-height: 4.5vh;border:0;background:none;background-image: url(<?php echo $image_url;?>files/images/guest/copyme.png);background-position:center;background-size: contain; background-repeat: no-repeat;}
    </style>

<div style="position: fixed;width:100%;height:100%;top:0;left:0;background: #000;z-index:115;" id="loading">
    <div class="load4">
        <div class="loader">Loading...</div>
    </div>
</div>

<!-- position: relative; width: 100%;margin: 0 auto; background: #fff; display: none; -->
<div class="main" id="app-main" style="display: none;'">

<!--广播-->
<div v-show="isShowNoty" style="position: absolute;background-color: rgba(0,0,0,0.6);width: 100%;height: 4vh;line-height: 4vh;color: white;font-size: 2.5vh;overflow: hidden;z-index: 9998;">
    <img style="position: absolute;top: 0vh;left: 3vw;width: 4vh;height: 4vh;" src="<?php echo $image_url;?>files/images/common/laba.png">
</div>
<div v-show="isShowNoty" id="marquee" style="position: absolute;top: 0;left: 12vw;background-color: rgba(0,0,0,0);width: 88vw;height: 4vh;line-height: 4vh;color: white;font-size: 2.5vh;overflow: hidden;z-index: 9999;">
    {{notyMsg}}
</div>
<!--end-->

    <!-- 观战功能 -->
    <img src="<?php echo $image_url;?>files/images/guest/is_watching.png" style="position: fixed;z-index: 90;width: 40%;left: 30%;top: 55.5%;" v-show="isWatching==1">
    <div class="watch" id="vwatch" v-show="showGuest==1">
        <div class="watchBack" v-on:click="hideGuests"></div>
        <div class="mainPart">
            <img v-on:click="hideGuests" src="<?php echo $image_url;?>files/images/guest/cancel.png" class="watchCancel" />
            <img src="<?php echo $image_url;?>files/images/guest/title.png" class="watchTitle" />
            <div class="playerList">
                <div class="playerItem" v-for="guest in guests">
                    <img v-bind:src="guest.avatar" class="playerAvatar">
                    <div class="playerName">{{guest.nickname}}</div>
                    <img src="<?php echo $image_url;?>files/images/guest/icon.png" class="playerIcon">
                </div>
            </div>
            <div class="buttonMiddle">
                <img v-show="showWatchButton" v-on:click="guestRoom" src="<?php echo $image_url;?>files/images/guest/watch_true.png"  />
                <img v-show="showSitdownButton" v-on:click="sitDown" src="<?php echo $image_url;?>files/images/guest/sitdown_true.png"  />
            </div>
        </div>
    </div>  

    <div class="roomCard">
        <img  src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/home/fwm.png" />
        <div class="num">
            <div style="position: absolute;top:0;left: 0;width: 100%;height: 100%;background: #fff;opacity: .2;border-radius:10px;"></div>
            <div style="position: relative;padding: 0 10px 0 35px;">{{userData.myCode}}</div>
        </div>
    </div>
    <div class="clickMe"><img src="<?php echo $image_url;?>files/images/guest/clickme.png" v-on:click="location.reload()"></div>
    <button class="copyMe" data-clipboard-text="<?php echo $room_url;?>"></button>
    <div class="round">{{game.round}}&nbsp/&nbsp{{game.total_num}}&nbsp局</div>
    
    <div class="disconnect" v-show="!connectOrNot" style="position: fixed;top:45%;left: 0;width: 100%;text-align: center;z-index: 101">
        <div style="width: 250px;height:27px;position: absolute;top:-2;left: 50%;margin-left: -125px;background: #000;opacity: .5;border-radius:15px;">
        </div>
        <a style="font-size: 16px;color: #fff;padding: 5px 14px;position:relative;">已断开连接，正在重新连接...</a>
    </div>

    <img class="bottom"  src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/common/footer_bull.png"  usemap="#planetmap" />
    <img class="bottomGameRule" src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/common/icon_game_rule.png" v-on:click="showGameRule" style="z-index: 110">
    <img class="bottomGameHistory" src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/common/icon_sound61.png" v-on:click="showAudioSetting" style="z-index: 110">
    <img class="bottomGameMessage" src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/common/icon_game_message.png" v-on:click="showMessage">
    <img class="bottomWatch" src="<?php echo $image_url;?>files/images/common/icon_watch.png" v-on:click="showGuests"/> 

    <div class="myCardType">
        <div v-show="player[0].card_type==1">高牌</div>
        <div v-show="player[0].card_type==2">对子</div>
        <div v-show="player[0].card_type==3">顺子</div>
        <div v-show="player[0].card_type==4">同花</div>
        <div v-show="player[0].card_type==5">同花顺</div>
        <div v-show="player[0].card_type==6">三条</div>
    </div>

    <div  class="table" id="table">
        <img class="tableBack"  src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/table2.jpg" />    

        <!-- 筹码  -->        
        <div class="place" v-show="game.status==2">
            <div class="totalScore" >
                <div class="scores">{{game.score}}</div>
                <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/totalScore.png" />
            </div>
            <div class="scoresArea"></div>
        </div>

        <!-- 发牌  -->
        <div class="cardDeal">

            <div v-for="p in player" v-show="p.account_id>0&&p.account_status>2&&(p.num!=1||(p.account_status!=4&&p.account_status!=6&&p.account_status!=7&&!player[0].is_showCard))&&(game.cardDeal>0||p.account_status==6||p.account_status==7)">
                
                <div class="card" v-bind:class="'card' + p.num + '1'" v-show="game.cardDeal>0||p.account_status==6||p.account_status==7"></div>
                <div class="card" v-bind:class="'card' + p.num + '2'" v-show="game.cardDeal>1||p.account_status==6||p.account_status==7"></div>
                <div class="card" v-bind:class="'card' + p.num + '3'" v-show="game.cardDeal>2||p.account_status==6||p.account_status==7"></div>
                <div class="isSeen" v-bind:class="'isSeen' + p.num" v-show="p.num>1&&p.account_status==4"></div>        
                <div class="isQuit" v-bind:class="'isQuit' + p.num" v-show="p.account_status==6"></div>     
                <div class="isLose" v-bind:class="'isLose' + p.num" v-show="p.account_status==7&&!p.is_pk"></div>
            </div>
            
            <!-- 自己的牌 -->
            <div class="myCards" v-show="player[0].is_showCard&&player[0].account_status>2" >
                <div v-show="player[0].is_win" class="winText" >
                    <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/winner.png" v-show="!player[0].win_show && player[0].account_id==userData.accountId&&player[0].is_guest!=1" />
                    <div class="winScore" v-show="player[0].win_show" style="width: 100%;left: 0;text-align: center;font-size: 16px;">+{{player[0].current_win}}</div>
                </div>
                <div v-show="player[0].is_xipai" class="winText" >
                    <div class="winScore" style="animation:coinUp 5s ;-webkit-animation:coinUp 5s ;" v-show="player[0].is_xipai" style="width: 100%;left: 0;text-align: center;font-size: 16px;">喜牌 {{player[0].xipai_score}}</div>
                </div>

                <div class="cards card0">
                    <div class="face front"></div>
                    <div class="face back" v-bind:class="'card' + player[0].card[0]"></div>
                    <div class="myQuitBack" v-show="player[0].account_status==6||player[0].account_status==7"></div>
                </div> 

                <div class="cards card1">
                    <div class="face front"></div>
                    <div class="face back" v-bind:class="'card' + player[0].card[1]"></div>
                    <div class="myQuitBack" v-show="player[0].account_status==6||player[0].account_status==7"></div>
                </div>  

                <div class="cards card2">
                    <div class="face front"></div>
                    <div class="face back" v-bind:class="'card' + player[0].card[2]"></div>
                    <div class="myQuitBack" v-show="player[0].account_status==6||player[0].account_status==7"></div>
                </div>
                
                <!-- width: 70px;height:20px;position: absolute;top:17px;left:50%;margin-left: -40px;z-index: 95;text-align: center;color: #fff;font-size: 15px;padding: 1px 5px;-->
                <div style="width: 70px;height:20px;position: absolute;top:17px;left:50%;margin-left: -40px;z-index: 95;text-align: center;color: #fff;font-size: 15px;padding: 1px 5px;" v-if="player[0].account_id==userData.accountId&&player[0].is_guest!=1" v-show="player[0].account_status==5&&player[0].playing_status==2 && game.can_look==1" v-on:click="choose(1)">
                    <!-- <div style="position: absolute;top:0;left: 0;border-radius: 11px;opacity: 0.3;width: 100%;height: 100%;background: #000;"></div>
                    <div style="position: relative;opacity: 0.9;">点击看牌</div> -->
                    <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/lookcard.png" style="width: 70px;height: 20px">
                </div>
                <!-- 观战功能 -->
                <div class="isSeen isSeen1" v-if="player[0].account_id!=userData.accountId&&isWatching==1" v-show="player[0].account_status==4 && game.cardDeal>0"></div>
                <div class="isQuit isQuit1" v-show="player[0].account_status==6"></div>                     
                <div class="isLose isLose1" v-show="player[0].account_status==7"></div>                     
            </div>

        </div>

        <!-- 玩家     -->     
        <div  v-for="p in player" key="p.num" class="member" v-bind:class="'member' + p.num" v-show="p.account_id>0&&!p.is_pk">
            <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/player.png" class="background">
            <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/playerWin.png" class="background" v-show="p.is_win&&p.num==1">
            <div class="title">{{p.nickname}}</div>
            <!--
            <img v-bind:src="p.headimgurl" class="avatar">
            -->

            <div class="avatar">
                <img v-bind:src="p.headimgurl" style="position: absolute;left:25%;width: 100%;border-radius: 3px;">

                <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/avatar_timer.jpg" style="position: absolute;left:25%;width: 100%;border-radius: 3px;" v-show="p.playing_status>1">
                <div style="position: absolute; top: 0px;left: 25%;width: 100%; line-height: 42px;text-align: center;color: #602603;font-size: 20px;" v-if="p.num!=1" v-show="p.playing_status>1">{{p.limit_time}}</div>
                <div style="position: absolute; top: 0px;left: 25%;width: 100%; line-height: 52px;text-align: center;color: #602603;font-size: 20px;" v-if="p.num==1" v-show="p.playing_status>1">{{p.limit_time}}</div>
            </div>

            <div class="score">{{p.account_score}}</div>
            <div class="quitBack" v-show="((p.account_status==6||p.account_status==7)&&p.num==1)||(p.num>1&&p.online_status==0)" ></div>
            
            <!--  头像计时动画 
            <div class="colorBorder" v-bind:class="'colorBorder' + p.num" v-show="p.playing_status>1" v-bind:style="'animation:mycolor1 ' + p.limit_time + 's linear;-webkit-animation:mycolor1 ' + p.limit_time + 's linear;'">
                <div class="backColor"  v-bind:style="'animation:mycolor2 '+ p.limit_time + 's linear;-webkit-animation:mycolor2 ' + p.limit_time + 's linear;'">
                </div>
            </div>  
            -->
            <!-- 观战功能 -->
            <img src="<?php echo $image_url;?>files/images/guest/guest_avatar.png" style="position: absolute;left: 0%;width: 100%;" v-show="p.is_guest==1">
            
            <div class="isReady" v-show="game.round!=game.total_num">
                <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/readyButton.png" class="unready" v-if="p.num==1&&p.account_id==userData.accountId&&p.is_guest!=1"  v-show="(p.account_status==1||p.account_status==0)&&game.status==1" v-on:click="imReady" />
                <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/ready.png" class="ready" v-show="p.account_status==2" />
            </div>

            <div class="cardOver" v-bind:class="'cardOver' + p.num" v-if="p.num!=1" v-show="game.cardDeal==-1&&p.account_status>1&&p.account_status!=6&&p.account_status!=7&&p.card.length>0">
                <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/cardBox.png" class="cardResult" v-show="!p.is_win" />
                <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/cardBoxWin.png" class="cardResult" v-show="p.is_win" />
                <div class="name">{{p.nickname}}</div>
                <div class="openCard">
                    <div class="cards card0">
                        <div class="face front"></div>
                        <div class="face back" v-bind:class="'card' + p.card[0]"></div>
                    </div> 
                    <div class="cards card1">
                        <div class="face front"></div>
                        <div class="face back" v-bind:class="'card' + p.card[1]"></div>
                    </div>        
                    <div class="cards card2">
                        <div class="face front"></div>
                        <div class="face back" v-bind:class="'card' + p.card[2]"></div>
                    </div>          
                </div>
                <div v-show="p.is_win&&p.win_show" class="winText">
                    <div class="winType" v-bind:class="'winType' + p.win_type"></div>
                    <div class="winScore" v-bind:class="'winType' + p.win_type">+{{p.current_win}}</div>
                </div>
                <div v-show="p.is_xipai" class="winText">
                    <div class="winScore" style="animation:coinUp 5s ;-webkit-animation:coinUp 5s ;" v-bind:class="'winType' + p.win_type">喜牌 {{p.xipai_score}}</div>
                </div>
            </div>
            <div class="PKbox" v-show="pk.round==1&&pkPeople.length>0&&p.is_readyPK&&(player[0].account_status==5||player[0].account_status==4)" v-on:click="choose(5,p.account_id)">
                <div class="PKboxBack"></div>
            </div>
        </div>

        <!-- 玩家消息  -->
        <div v-for="p in player">
            <div class="messageSay" v-bind:class="'messageSay' + p.num" v-show="p.messageOn">
                <div>{{p.messageText}}</div>
                <div class="triangle"> </div>
            </div>
        </div>

        <div class="clock" v-show="game.time>-1">
            {{game.time}}
        </div>
        
        <!-- 按键     --> 
        <div class="myButton" v-if="player[0].account_id==userData.accountId&&player[0].is_guest!=1 && player[0].playing_status==2&&pk.round==0">
            <div class="scoreList" >
                <div v-show="player[0].account_status==4">      
                    <div class="scoreItem scoreItemText scoreItem11"  v-show="game.currentScore<=scoreList1[0]" v-on:click="choose(2,scoreList1[0])">{{scoreList1[0]}}</div>
                    <div class="scoreItem scoreItemText scoreItem50"  v-show="game.currentScore>scoreList1[0]">{{scoreList1[0]}}</div>  
                    <div class="scoreItem scoreItemText scoreItem21"  v-show="game.currentScore<=scoreList1[1]" v-on:click="choose(2,scoreList1[1])">{{scoreList1[1]}}</div>
                    <div class="scoreItem scoreItemText scoreItem50"  v-show="game.currentScore>scoreList1[1]">{{scoreList1[1]}}</div>
                    <div class="scoreItem scoreItemText scoreItem31"  v-show="game.currentScore<=scoreList1[2]" v-on:click="choose(2,scoreList1[2])">{{scoreList1[2]}}</div>
                    <div class="scoreItem scoreItemText scoreItem50"  v-show="game.currentScore>scoreList1[2]">{{scoreList1[2]}}</div>  
                    <div class="scoreItem scoreItemText scoreItem41"  v-show="game.currentScore<=scoreList1[3]" v-on:click="choose(2,scoreList1[3])">{{scoreList1[3]}}</div>
                </div>

                <!-- 闷牌 -->                 
                <div v-show="player[0].account_status==5">
                    <div class="scoreItem scoreItemText scoreItem51"  v-show="game.currentScore<=scoreList1[0]" v-on:click="choose(2,scoreList2[0])">{{scoreList2[0]}}</div>
                    <div class="scoreItem scoreItemText scoreItem50"  v-show="game.currentScore>scoreList1[0]">{{scoreList2[0]}}</div>  
                    <div class="scoreItem scoreItemText scoreItem11"  v-show="game.currentScore<=scoreList1[1]" v-on:click="choose(2,scoreList2[1])">{{scoreList2[1]}}</div>
                    <div class="scoreItem scoreItemText scoreItem50"  v-show="game.currentScore>scoreList1[1]">{{scoreList2[1]}}</div>
                    <div class="scoreItem scoreItemText scoreItem21"  v-show="game.currentScore<=scoreList1[2]" v-on:click="choose(2,scoreList2[2])">{{scoreList2[2]}}</div>
                    <div class="scoreItem scoreItemText scoreItem50"  v-show="game.currentScore>scoreList1[2]">{{scoreList2[2]}}</div>  
                    <div class="scoreItem scoreItemText scoreItem61"  v-show="game.currentScore<=scoreList1[3]" v-on:click="choose(2,scoreList2[3])">{{scoreList2[3]}}</div>
                </div>
            </div>
            <div class="doubleButton">
                <div class="isOver">
                    <div class="leftButton button" v-on:click="choose(3,1)"></div>
                    <div class="rightButton button" v-show="game.can_open==1&&pkPeople.length>0" v-on:click="choose(4,1)"></div>
                    <div class="rightButton1 button" v-show="game.can_open==0||pkPeople.length==0" ></div>
                </div>
            </div>
        </div>

        <div class="pkBackground" v-show="pk.round==1&&pkPeople.length>0&&(player[0].account_status==5||player[0].account_status==4)" v-on:click="quitPk">
            <div class="pkBackText">选择比牌对象</div>
        </div>      
    </div>



    <!--防伪码-->
        <div v-show="isShowAlert&&alertType==4" style="z-index:110;position:fixed;width:15vh;height:12vh;top:7vh;left:50%;margin-left:-7.5vh;background:url(<?php echo $image_url;?>files/images/custom/comm/fwmbg.png) no-repeat 0 0 / 100% 100%">
            <div style="width:15vh;height:5vh;line-height:5vh;padding-top:0.5vh;text-align:center;font-size:2.8vh;font-weight:bold;color:#fff">{{userData.myCode}}</div>
            <div style="width:15vh;height:4vh;line-height:4vh;text-align:center;color:#ddd;font-size:2.5vh;font-weight:bold;background:;">防伪码</div>
        </div>
    <!-- 提示  -->    
    <div class="alert" id="valert" v-show="isShowAlert">
        <div class="alertBack"></div>
        <div class="mainPart">
            <div class="backImg">
                <div class="blackImg"></div>
            </div>

            <div class="alertText">
                <div class="rull" v-show="alertType==4"  style="font-size: 2.2vh">
                    底分：<a>{{ruleInfo.default_score}}</a><br>
                    筹码：
                    <a v-if="ruleInfo.chip_type==1">2/5,4/10,8/20,10/25</a>
                    <a v-if="ruleInfo.chip_type==2">4/10,8/20,10/25,20/50</a>
                    <a v-if="ruleInfo.chip_type==3">6/15,10/25,20/50,40/100</a><br>
                    <a v-if="ruleInfo.disable_look==1||ruleInfo.disable_pk_men==1||ruleInfo.only_big==1">规则：</a>
                    <a v-if="ruleInfo.disable_look==1">首轮禁止看牌</a>
                    <a v-if="ruleInfo.disable_pk_men==1">闷牌，全场禁止比牌</a>
                    <a v-if="ruleInfo.only_big==1">只发AKQJ10</a>

                    <a v-if="ruleInfo.disable_look==1||ruleInfo.disable_pk_men==1"></a><br>
                    比牌：<a v-if="ruleInfo.disable_pk_score>0">{{ruleInfo.disable_pk_score}}分以下禁止比牌</a><a v-if="ruleInfo.disable_pk_score==0">无</a><br>
                    上限：<a v-if="ruleInfo.upper_limit>0">{{ruleInfo.upper_limit}}分</a><a v-if="ruleInfo.upper_limit==0">无</a><br>
                    喜牌：<a v-if="ruleInfo.xipai_score>0">{{ruleInfo.xipai_score}}分</a><a v-if="ruleInfo.xipai_score==0">无</a><br>
                    局数：<a v-if="ruleInfo.ticket_count==1">10局</a><a v-if="ruleInfo.ticket_count==2">20局</a><br>
                </div>

                <div>{{alertText}}
                
                </div>
            </div>
            
            <div v-show="alertType==2">
                <div class="buttonLeft" v-on:click="home">返回首页</div>
                <div class="buttonRight" v-on:click="home">创建房间</div>
            </div>          
            <div v-show="alertType==3">
                <div class="buttonLeft" v-on:click="home">返回首页</div>
                <div class="buttonRight" v-on:click="closeAlert">取消</div>
            </div>          

            <!-- 观战功能 -->
            <div v-show="alertType==4" class="button">
                <div class="buttonLeft" v-show="joinType==1||joinType==3" v-on:click="guestRoom"><img src="<?php echo $image_url;?>files/images/guest/watch_true.png" ></div>
                <div class="buttonRight " v-show="joinType==1||joinType==2" v-on:click="sitDown"><img src="<?php echo $image_url;?>files/images/guest/sitdown_true.png" ></div>

                <div class="buttonLeft " v-show="joinType==2" ><img src="<?php echo $image_url;?>files/images/guest/watch_false.png" ></div>
                <div class="buttonRight " v-show="joinType==3"><img src="<?php echo $image_url;?>files/images/guest/sitdown_false.png" ></div>
            </div>
        
            <div v-show="alertType==7">
                <div class="buttonMiddle" v-on:click="home">返回首页</div>
            </div>  
            <div v-show="alertType==8">
            </div>
            <div v-show="alertType==11">
                <div class="buttonMiddle" v-on:click="closeAlert">知道了</div>
            </div>
            <div v-show="alertType==21">
                <div class="buttonMiddle" v-on:click="closeAlert">确定</div>
            </div>
            <div v-show="alertType==22">
                <div class="buttonMiddle" v-on:click="closeAlert">确定</div>
            </div>
            <div v-show="alertType==23">
                <div class="buttonMiddle" v-on:click="finishBindPhone()">确定</div>
            </div>  
            <div v-show="alertType==31">
                <div class="buttonMiddle" v-on:click="reloadView()">确定</div>
            </div>
            <div v-show="alertType==32">
                    <div class="buttonMiddle" v-on:click="reloadView()">重新登录</div>
            </div>              
        </div>
    </div>

    <!--  PK  -->
    <div class="playerPK" v-show="pk.round>1">
        <div class="pkBack" ></div>
        <div class="pk1" >
            <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/comLeft.png" style="position: absolute;top:0;left:0;width:95%;height:140px;">
            <div class="pkPlayer">
                <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/comB.png" class="background" v-show="pk.round>1">
                <div class="title">{{pk1.nickname}}</div>
                <img v-bind:src="pk1.headimgurl" class="avatar">
                <div class="score">{{pk1.account_score}}</div>
                <div class="quitBack"></div>
            </div>
            <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/comLoser.png" v-show="pk.round==4&&pk1.account_status==7" class="pkLoser" />
        </div>          
        <div class="pk2">
            <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/comRight.png" style="position: absolute;top:0;right:0;width:95%;height:140px;">
            <div class="pkPlayer">
                <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/comB.png" class="background" v-show="pk.round>1">
                <div class="title">{{pk2.nickname}}</div>
                <img v-bind:src="pk2.headimgurl" class="avatar">
                <div class="score">{{pk2.account_score}}</div>
                <div class="quitBack"></div>
            </div>
            <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/comLoser.png" v-show="pk.round==4&&pk2.account_status==7" class="pkLoser" />
        </div>  
        <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/comE.gif" v-show="pk.round==3" class="pkE" />   
        <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/comV.png" v-show="pk.round>2" class="pkV" />
        <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/comS.png" v-show="pk.round>2" class="pkS" />
    </div>
    
    <!-- 排行 -->
    <div class="ranking hideRanking" id="ranking" style="z-index: 1">
        <div class="rankBack">
        <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/rank_bg.jpg" style="position: absolute;top: 0;left: 0;width: 100%">
        </div>

        <div class="rankText" style="position: absolute;top: 4%;">
            <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/rank_frame.png" style="position: absolute;top: 0%;left: 5vw;width: 190vw;">
            <div class="time" v-show="playerBoard.round>0" style="position: absolute;top: 45.5vw;width: 100%;">
                <a style="border-color: #ce6eff;background-color: #382b5e;font-size: 6vw;">房间号:{{game.room_number}}&nbsp&nbsp&nbsp&nbsp{{playerBoard.record}}&nbsp&nbsp&nbsp&nbsp{{game.total_num}}局</a>
            </div>
            <div style="height: 63.5vw;"></div>         
            <div v-for="p in playerBoard.score" class="scoresItem" v-bind:class="{true: 'scoresItemYellow', false: 'scoresItemWhite'}[p.account_score>0]" v-show="p.account_id>0">
                <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/common/rank_bigwinner2.png" style="top: 0; margin-top: -2.5vw; left: 4px;height: 100%" v-show="p.isBigWinner==1">
                <div class="name">{{p.nickname}}</div>
                <div class="currentScores"><a v-show="p.account_score>0">+</a>{{p.account_score}}</div>
            </div>
        </div>
        <div class="button roundEndShow" v-if="roomStatus!=4||1">
            <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/common/scoresRank3.png" style="float: left;margin-left: 34%;" />
        </div>
    </div>

    <!-- 消息     -->
    <div class="message" v-show="isShowMessage" >
            <div class="messageBack" v-on:click="hideMessage"></div>
            <div class="textPartOuter"></div>
            <div id="message-box" class="textPart" v-bind:style="'height: ' + 0.39 * height + 'px;'">
                <!-- <div class="outline"></div> -->
                <div id="scroll-box" class="textList" style="width: 100%;">
                    <div class="textItem" v-for="m in message" v-on:click="messageOn(m.num)">{{m.text}}</div>
                    <!-- <div class="textItem" style="height: 5px;background: #434547;"></div> -->  
                </div>
            </div>
        </div>

    <!-- end图片  -->
    <div id="endCreateRoom" class="end" style="position: fixed;width: 100%;height:100%;top:0;left:0;z-index: 120;display: none;overflow: hidden;">
        <img src="" style="width: 100vw;position: absolute;top:0;left: 0;height: 100vh;" id="end"  usemap="#planetmap1" />
    </div>

    <!-- 游戏规则-->
    <div class="createRoom" id="vroomRule" v-show="ruleInfo.isShowRule" v-on:click="cancelGameRule">
        <div class="createRoomBack"></div>
        <div class="mainPart" >         
            <div  class="createB"></div>
            <div class="createTitle">
                <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/game/game_rule.png" />
            </div>  
            
            <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/common/cancel.png" class="cancelCreate" v-on:click="cancelGameRule"/>

            <div class="blueBack">
                <div class="selectPart" style="top: 0px;height:28px;line-height:28px;">
                    <div class="selectTitle" style="width: 100%;font-size: 2vh; text-align: center;color: #7dd9ff; background-color: #143948;opacity: 1.0">创建房间,游戏未进行,不消耗房卡</div>
                </div>  

                <div class="selectPart" style="height:30px;line-height:30px;padding:6px 0;">
                    <div class="selectTitle">筹码：</div>
                    <div class="selectList" >
                        <div class="selectItem" style="margin-left:12px;" v-if="ruleInfo.chip_type==1">
                            <div class="selectText" >2/5,4/10,8/20,10/25</div>
                        </div>                          
                        <div class="selectItem" style="margin-left:12px;" v-if="ruleInfo.chip_type==2">
                            <div class="selectText" >4/10,8/20,10/25,20/50</div>
                        </div>
						<div class="selectItem" style="margin-left:12px;" v-if="ruleInfo.chip_type==3">
                            <div class="selectText" >6/15,10/25,20/50,40/100</div>
                        </div>
						
                    </div>
                </div>
                <div class="selectPart" v-bind:style="'height:' + ruleInfo.rule_height + 'px;line-height:30px;padding:6px 0;'" v-if=" ruleInfo.disable_pk_men==1 || ruleInfo.disable_look==1 || ruleInfo.only_big==1">
                    <div class="selectTitle">规则：</div>
                    <div class="selectList">
                        <div class="selectItem" style="margin-left:12px;" v-if="ruleInfo.disable_pk_men==1">
                            <div class="selectText" >闷牌，全场禁止比牌</div>
                        </div>
                        <div class="selectItem" style="margin-left:12px;" v-if="ruleInfo.disable_look==1">
                            <div class="selectText" >首轮禁止看牌</div>
                        </div>
                        <div class="selectItem" style="margin-left:12px;" v-if="ruleInfo.only_big==1">
                            <div class="selectText" >只发大牌(AKQJ10)</div>
                        </div>

                    </div>
                </div>
                <div class="selectPart" style="height:30px;line-height:30px;padding:6px 0;">
                    <div class="selectTitle">比牌：</div>
                    <div class="selectList">
                        <div class="selectItem" style="margin-left:12px;" v-if="ruleInfo.disable_pk_score>0">
                            <div class="selectText" >{{ruleInfo.disable_pk_score}}分以下不能比牌</div>
                        </div>
                        <div class="selectItem" style="margin-left:12px;" v-if="ruleInfo.disable_pk_score==0">
                            <div class="selectText" >无</div>
                        </div>
                    </div>
                </div>

                <div class="selectPart" style="height:30px;line-height:30px;padding:6px 0;">
                    <div class="selectTitle">局数：</div>
                    <div class="selectList">
                        <div class="selectItem" style="margin-left:12px;" v-if="ruleInfo.ticket_count==1">
                            <div class="selectText" >10局X1张房卡</div>
                        </div>                          
                        <div class="selectItem" style="margin-left:12px;" v-if="ruleInfo.ticket_count==2">
                            <div class="selectText" >20局X2张房卡</div>
                        </div>
                    </div>
                </div>
                <div class="selectPart" style="height:30px;line-height:30px;padding:6px 0;">
                    <div class="selectTitle">上限：</div>
                    <div class="selectList">
                        <div class="selectItem" style="margin-left:12px;" v-if="ruleInfo.upper_limit==0">
                            <div class="selectText" >无</div>
                        </div>                          
                        <div class="selectItem" style="margin-left:12px;" v-if="ruleInfo.upper_limit==500">
                            <div class="selectText" >500</div>
                        </div>
                        <div class="selectItem" style="margin-left:12px;" v-if="ruleInfo.upper_limit==1000">
                            <div class="selectText" >1000</div>
                        </div>
                        <div class="selectItem" style="margin-left:12px;" v-if="ruleInfo.upper_limit==2000">
                            <div class="selectText" >2000</div>
                        </div>
                    </div>
                </div>
                <div class="selectPart" style="height:30px;line-height:30px;padding:6px 0;">
                    <div class="selectTitle">喜牌：</div>
                    <div class="selectList">
                        <div class="selectItem" style="margin-left:12px;">
                            <div class="selectText" v-if="ruleInfo.xipai_score==0">无</div>
                            <div class="selectText" v-if="ruleInfo.xipai_score>0">{{ruleInfo.xipai_score}}分</div>
                        </div>

                    </div>
                </div>
                <!-- <div class="createCommit" v-on:click="cancelGameRule" >确定</div> -->

            </div>
        </div>
    </div>

    <!-- 设置音频 -->
        <div class="audioRoom" id="vaudioRoom" v-show="editAudioInfo.isShow">
            <div class="audioRoomBack" v-on:click="cancelAudioSetting"></div>
            <div class="mainPart" >         
                <div  class="createB"></div>
                <div class="createTitle" style="height:4vh;">
                </div>  

                <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/common/cancel.png" class="cancelCreate" v-on:click="cancelAudioSetting"/>

                <div class="blueBack">
                    <!--<div class="selectPart" style="top: 0px;height:4vh;line-height:4.1vh;">
                        <div class="selectTitle" style="width: 100%;font-size: 2vh; text-align: center;color: #7dd9ff; background-color: #143948;opacity: 1.0">点击确定后生效</div>
                    </div>  -->
                    <div style="height:0.5vh;"></div>

                    <div class="selectPart" style="height:4vh;line-height:4vh;padding:0.8vh 0;">
                        <div class="selectTitle">背景音乐：</div>
                        <div class="selectList" >
                            <div class="selectItem" style="margin-left:10px;" v-on:click="setBackMusic" >
                                <div class="selectBox"></div>
                                <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/common/gou.png" v-show="editAudioInfo.backMusic==1"/>
                                <div class="selectText">开启</div>
                            </div>                          
                        </div>
                    </div>

                    <div class="selectPart" style="height:4vh;line-height:4vh;padding:0.8vh 0;">
                        <div class="selectTitle">游戏音效：</div>
                        <div class="selectList" >
                            <div class="selectItem" style="margin-left:10px;" v-on:click="setMessageMusic">
                                <div class="selectBox"></div>
                                <img src="<?php echo $image_url;?>files/d_<?php echo $dealer_num;?>/images/common/gou.png" v-show="editAudioInfo.messageMusic==1"/>
                                <div class="selectText">开启</div>
                            </div>                          
                        </div>
                    </div>

                    <div class="createCommit" v-on:click="confirmAudioSetting" >确定</div>

                </div>
            </div>
        </div>
    
    <!-- 绑定手机号码 -->
    <div id="validePhone" style="display: none;" v-show="isAuthPhone==1">
        <div class="phoneMask" style="position: fixed;z-index: 98;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);" ></div>
        <div class="phoneFrame" style="position: fixed;z-index: 99;width: 80vw;max-width: 80vw; top: 50%; left: 50%;-webkit-transform:translate(-50%,-60%); background-color: #fff; text-align: center; border-radius: 8px; overflow: hidden;opacity: 1; color: white;">
            <div style="height: 2.2vw;"></div>

            <div style="padding: 0vh;font-size: 3.5vw; line-height: 8vw; word-wrap: break-word;word-break: break-all;color: #000;background-color: white;" >
                验证手机号，房卡可找回。
            </div>
            <div style="height: 2.2vw;"></div>
            <div style="position: relative;height: 15vw;word-wrap: break-word;word-break: break-all;color: #000;background-color: white;border-top: solid;border-color: #e6e6e6;border-width: 0px;">
                <input  v-on:input="phoneChangeValue()" v-model="sPhone" type="number" name="phone" placeholder="输入手机号" style="padding:0 12px 0 12px;position: absolute;top:  2.5vw;left: 4vw;width: 48vw;height: 11vw;line-height: 6.5vw;border-style: solid;border-width: 1px;border-radius: 0.5vh;border-color: #e6e6e6;font-size: 4vw;-webkit-appearance: none;">
                <div id="authcode" v-on:click="getAuthcode()" style="position: absolute;top:  2.5vw;right: 4vw; width: 22vw;height: 10vw;line-height: 10vw;background-color: rgb(211,211,211);font-size: 3.5vw;border-radius: 0.5vh;color: white;">
                    {{authcodeText}}
                </div>
            </div>
            <div style="position: relative;height: 15vw;word-wrap: break-word;word-break: break-all;color: #000;background-color: white;border-top: solid;border-color: #e6e6e6;border-width: 0px;">
                <input  v-model="sAuthcode" type="number" name="phone1" placeholder="输入验证码" style="padding:0 12px 0 12px;position: absolute;top: 1vw;left: 4vw;width: 72vw;height: 11vw;line-height: 6.5vw;border-style: solid;border-width: 1px;border-radius: 0.5vh;border-color: #e6e6e6;font-size: 4vw;-webkit-appearance: none;">

            </div>
            <div style="height: 2.2vw;"></div>
            <div style="position: relative; left: 4vw;width: 72vw;line-height: 10vw; font-size: 4vw;display: flex;border-radius: 2vw;" v-on:click="bindPhone()">
                <div style="display: block;-webkit-box-flex:1;flex: 1;text-decoration: none;-webkit-tap-highlight-color:transparent;position: relative;margin-bottom: 0;color: rgb(255,255,255);border-top: solid;border-color: #e6e6e6;border-width: 0px;background-color: rgb(64,112,251);border-radius: 1vw;">立即绑定</div>
            </div>
            <div style="height:4vw;"></div>
        </div>
    </div>

    <script type="text/javascript" src="<?php echo $image_url;?>files/js/canvas.js" ></script>
</div>


</body>

<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js" ></script>
<script type="text/javascript" src="<?php echo $image_url;?>files/js/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="<?php echo $image_url;?>files/js/jquery.marquee.min.js"></script><!--广播-->
<script type="text/javascript" src="<?php echo $image_url;?>files/js/bscroll.js"></script>
<script type="text/javascript" src="<?php echo $image_url;?>files/js/velocity.js"></script>
<script type="text/javascript" src="<?php echo $image_url;?>files/js/vue.min.js" ></script>
<script type="text/javascript" src="<?php echo $image_url;?>files/js/vue-resource.min.js" ></script> 
<script type="text/javascript" src="<?php echo $image_url;?>files/js/flower/flower-vue-8-23.js?v=0408"></script>
<script type="text/javascript" src="<?php echo $image_url;?>files/js/clipboard.min.js"></script>
<script type="text/javascript" src="<?php echo $image_url;?>files/layer/mobile/layer.js"></script>
<script>
    var clipboard = new ClipboardJS('.copyMe',{
        text: function(trigger) {
            return "六人拼三张（房间号" + globalData.roomNumber + "）："+ globalData.roomUrl;
        }
    });
    clipboard.on('success', function(e) {
        console.log(e);
        layer.open({
            content: '复制成功！'
            ,skin: 'msg'
            ,time: 4
        });
    });

</script>
</html>
